import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { useLoginMutation } from "../../slices/usersApiSlice";
import { setCredentials } from "../../slices/authSlice";
import toast from "react-hot-toast";
import { LogIn } from "lucide-react";
import Header from "../pages/Header";
import Footer from "../pages/Footer";

/**
 * LoginForm 组件用于用户登录表单。
 * 包含邮箱和密码输入框，以及登录按钮。
 * 提交表单时会调用登录 API，并在成功后跳转到首页。
 */
const LoginForm = () => {
  // 使用 React 的 useState 钩子管理邮箱和密码的输入值
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  // 使用 React Router 的 useNavigate 钩子进行页面导航
  const navigate = useNavigate();
  // 使用 Redux 的 useDispatch 钩子派发动作
  const dispatch = useDispatch();

  // 使用 React Query 的 useLoginMutation 钩子触发登录请求
  const [login] = useLoginMutation();

  // 使用 Redux 的 useSelector 钩子从 store 中获取当前用户的登录信息
  const { userInfo } = useSelector((state) => state.auth);

  // useEffect(() => {
  //   // 如果用户已经登录，重定向到首页
  //   if (userInfo) {
  //     navigate("/");
  //   }

  //   // 初始化 Google 登录
  //   window.google.accounts.id.initialize({
  //     client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
  //     callback: handleGoogleLogin,
  //   });

  //   // 渲染 Google 登录按钮
  //   window.google.accounts.id.renderButton(
  //     document.getElementById("googleSignInDiv"),
  //     { theme: "outline", size: "large" }
  //   );

  //   // 显示 Google 登录提示
  //   window.google.accounts.id.prompt();
  // }, [navigate, userInfo]);

  // const handleGoogleLogin = async (response) => {
  //   try {
  //     // 发送 Google 登录凭证到后端，获取用户信息
  //     const res = await fetch("/api/users/google-login", {
  //       method: "POST",
  //       headers: {
  //         "Content-Type": "application/json",
  //       },
  //       body: JSON.stringify({ tokenId: response.credential }),
  //     });

  //     const data = await res.json();
  //     if (data.success) {
  //       // 将用户信息存储到 Redux store 中，并重定向到首页
  //       dispatch(setCredentials(data));
  //       navigate("/");
  //       toast.success("使用 Google 成功登录！");
  //     } else {
  //       toast.error(data.message);
  //     }
  //   } catch (error) {
  //     toast.error("Google 登录失败！");
  //   }
  // };

  /**
   * 处理表单提交事件
   * @param {Event} e - 表单提交事件
   */
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 调用登录 API 并处理响应
      const res = await login({ email, password }).unwrap();
      // 将登录凭证存储到 Redux store 中，并重定向到首页
      dispatch(setCredentials({ ...res }));
      navigate("/");
      console.log(res);
    } catch (error) {
      // 显示错误信息
      toast.error(error?.data?.message || error.error);
    }
  };

  return (
    <>
      <Header />
      <div className="flex items-center justify-center min-h-screen bg-background text-text dark:bg-background-dark dark:text-text-dark p-4">
        <div className="w-full max-w-md p-8 space-y-6 bg-background rounded-lg shadow-2xl">
          <h2 className="text-3xl font-bold text-center text-red-600 dark:text-red-400 flex items-center justify-center gap-2">
            <LogIn size={28} />
            登录
          </h2>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                placeholder="邮箱"
                className="w-full px-4 py-3 border rounded-lg bg-gray-200  shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
              />
            </div>
            <div>
              <div className="flex justify-between">
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                  密码
                </label>
                <Link
                  to="/forgot-password"
                  className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-600 font-medium text-sm hover:underline transition-all duration-300 ease-in-out px-2 py-1"
                >
                  忘记密码
                </Link>
              </div>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                placeholder="密码"
                className="w-full px-4 py-3 border bg-gray-200 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
              />
            </div>
            <button
              type="submit"
              className="w-full py-3 mt-4 flex items-center justify-center gap-2 text-white bg-red-500 rounded-lg shadow-lg hover:bg-red-600 dark:bg-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-red-400"
            >
              <LogIn />
              登录
            </button>
          </form>
          <div className="text-center text-gray-500 dark:text-gray-300">
            或使用其他方式登录
          </div>
          {/* <div
            id="googleSignInDiv"
            className="flex items-center justify-center w-full py-3 mt-2"
          ></div> */}
          <p className="text-sm text-center text-gray-600 dark:text-gray-300">
            没有账号？{" "}
            <Link
              to="/register"
              className="font-medium text-red-600 dark:text-red-400 hover:underline"
            >
              注册
            </Link>
          </p>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default LoginForm;
